<template>
  <div class="chatBody">
    <div class="head">
      <span>{{ contactUserData.username }}</span>
      <!-- <span v-if="contactContactUserData.hw == null">{{
          contactContactUserData.name
        }}</span> -->
    </div>
    <div class="chat">
      <el-scrollbar style="height: 100%; width: 100%">
        <div
          v-for="message in chatRecords"
          :key="message.id"
          class="messageBox"
        >
          <span v-text="message.createdTime" style="width: 100%"> </span>
          <div :class="['chatLine', message.direction == true ? 'me' : '']">
            <img :src="headerImg" class="user-avatar" />
            <div
              :class="['chat-bubble', message.direction == true ? 'me' : '']"
            >
              <span v-if="message.typeEnum == 1">
                {{ message.content }}
              </span>

              <!-- 图片 -->
              <div class="text" v-else-if="message.typeEnum == 2">
                <img :src="message.content" class="image" alt="聊天图片" />
              </div>

              <!-- 其他 -->
              <div
                class="text"
                v-else
                v-text="
                  '[暂未支持的消息类型:' +
                  message.typeEnum +
                  ']\n\r' +
                  message.content
                "
              ></div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="send">
      <el-card class="chatcard">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="dialogContent"
          maxlength="100"
          show-word-limit
          rows="4"
          @keyup.native.enter="sendMessage"
        >
        </el-input>
        <div class="content-right">
          <el-button @click="sendMessage">发送消息</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    contactUserData: {
      type: Object,
      required: true,
      default: {
        id: 0,
        username: "none",
        phoneNumber: "",
        headPortrait: "",
        age: "",
      },
    },
  },
  created() {
    this.queryUserData();
    this.getChatRecords();
    this.chatroomInit();
  },
  data() {
    return {
      dialogContent: "",
      userData: "",
      webSocket: "",
      chatRecords: "",
      headerImg: require("@/assets/images/smile.png"),
    };
  },
  watch: {
    contactUserData() {
      this.getChatRecords();
    },
  },
  methods: {
    queryUserData() {
      this.$store.dispatch("request/get", "/user/info/basic").then((data) => {
        this.userData = data;
      });
    },
    getChatRecords() {
      if (JSON.stringify(this.contactUserData) === "{}") {
        return;
      }
      let form = {
        toId: this.contactUserData.id,
        url: "/chat/chatrecord",
      };
      this.$store.dispatch("request/getP", form).then((data) => {
        this.chatRecords = data;
      });
    },
    sendMessage() {
      const data = {
        type: "SINGLE_SENDING",
        typeEnum: 1,
        fromId: this.userData.id,
        toId: this.contactUserData.id,
        direction: true,
        content: this.dialogContent,
      };
      this.webSocket.send(JSON.stringify(data));
      this.updateChatBox(data);
      this.dialogContent = "";
    },
    updateChatBox(data) {
      this.chatRecords.push(data);
    },
    chatroomInit() {
      if (window.WebSocket) {
        this.webSocket = new WebSocket("ws://localhost:8085/ws");
      } else {
        alert("抱歉，您的浏览器不支持WebSocket协议!");
      }

      //连通之后的回调事件
      this.webSocket.onopen = function () {
        console.log("已经连通了websocket，接下来开始吧。。。");
        //                setMessageInnerHTML("已经连通了websocket");
      };
      //连接发生错误的回调方法
      this.webSocket.onerror = function () {
        console.log("出错了");
      };

      //连接关闭的回调方法
      this.webSocket.onclose = function () {
        console.log("连接已关闭...");
      };

      //接收到消息的回调方法
      this.webSocket.onmessage = function (event) {
        console.log("接收信息回调");
        var data = JSON.parse(event.data).data;
        switch (data.type) {
          case "REGISTER":
            console.log("REGISTER");
            break;
          case "SINGLE_SENDING":
            this.updateChatBox(data);
            console.log("SINGLE_SENDING");
            break;
          default:
            console.log("类型错误");
            break;
        }
      };
    },
  },
};
</script>


<style lang="scss" scoped>
.chatBody {
  height: 100%;
  width: 75%;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.head {
  height: 7%;
  width: 100%;
  // border: 1px solid hsl(0, 76%, 42%);
  background-color: RGB(54, 173, 253);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat {
  height: 63%;
  width: 100%;
  display: flex;
  padding: 5px;
  // border: 1px solid hsl(0, 2%, 61%);
  box-sizing: border-box;
}
.send {
  height: 30%;
  width: 100%;
  display: flex;
  padding: 5px;
  // border: 1px solid hsl(0, 2%, 61%);
  box-sizing: border-box;
}
.chatcard {
  width: 100%;
  box-sizing: border-box;
}
.messageBox {
  height: auto;
  width: 100%;
  display: block;
  // flex-direction: column;
  box-sizing: border-box;
  text-align: center;
  padding: 10px;
}
.content-right {
  display: flex;
  flex-direction: row-reverse;
  box-sizing: border-box;
}
.chat-bubble {
  display: flex;
  border-radius: 15px;
  padding: 10px 15px;
  background-color: #c2c5c3;
  max-width: 80%;
  margin-bottom: 10px;
  position: relative;
  align-self: flex-start;
}

.chat-bubble.me {
  background-color: #dcf8c6;
  align-self: flex-end;
  // justify-content: flex-end;
}

.chat-bubble:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
  border-width: 8px 12px 8px 0;
  border-color: transparent #c2c5c3 transparent transparent;
}
.chat-bubble.me:after {
  left: auto;
  right: -10px;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #dcf8c6;
}
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.chatLine{
  height: auto;
  width: 100%;
  display: flex;
}
.chatLine.me{
  flex-direction: row-reverse;
}
</style>